<template>
  <div>
    <!-- 条件查询。 inline 属性设置表单变为行内的表单域 -->
    <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px;">
      <!-- 有prop才可以重置 -->
      <el-form-item prop="deviceName">
        <el-input v-model="searchMap.deviceName" placeholder="设备名称" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item prop="deviceHard">
        <el-input v-model="searchMap.deviceHard" placeholder="主板类型" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item prop="deviceType">
        <el-input v-model="searchMap.payType" placeholder="设备类型" style="width: 200px;"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
        <!-- <el-button type="primary" @click="handleAdd">新增</el-button> -->
        <el-button type="primary" @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="deviceInfoSet">设备设置</el-button>
        <el-button type="primary" @click="deviceImageAvdSet">图片广告</el-button>
        <el-button type="primary" @click="deviceVideoAvdSet">视频广告</el-button>
        <el-button type="primary" @click="deviceLocalAvdSet">本地广告</el-button>
        <el-button type="primary" @click="faceMode">刷脸模式</el-button>
        <el-button type="primary" @click="qrcodeMode">扫码模式</el-button>
        <el-button type="primary" @click="updateVersion">版本升级</el-button>
      </el-form-item>
    </el-form>

    <!-- 列表-->
    <!-- :data 绑定渲染的数据；border: 边框; -->
    <el-table :data="list" height="580" style="width: 100%" :header-cell-style="{background:'#ddf6f6',color:'#606266'}" @selection-change="checkSelect">
      <!--type="index" 获取索引值，从1开始； label 显示的标题; prop 数据字段名； width 列的宽度 -->
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="deviceType" label="设备类型" align="center" :formatter = "deviceTypeFormat"></el-table-column>
      <el-table-column prop="deviceHard" label="主板类型" align="center" :formatter = "deviceHardFormat"></el-table-column>
      <el-table-column prop="paperLength" label="出纸长度" align="center" :formatter = "paperLengthFormat"></el-table-column>
      <el-table-column prop="faceOutCount" label="刷脸出纸" align="center"></el-table-column>
      <el-table-column prop="qrcodeOutCount" label="扫码出纸" align="center"></el-table-column>
      <el-table-column prop="deviceStatus" label="设备状态" align="center" :formatter = "deviceStatusFormat"></el-table-column>
      <el-table-column prop="paperOutType" label="取纸方式" align="center" :formatter = "paperOutTypeFormat"></el-table-column>
      <el-table-column prop="deviceAvdType" label="广告类型" align="center" :formatter = "deviceAvdTypeFormat"></el-table-column>
      <el-table-column prop="online" label="是否在线" align="center" :formatter = "onlineFormat"></el-table-column>
      <el-table-column prop="updateTime" label="最近更新" align="center" :formatter = "timeFormat"></el-table-column>
      <!-- <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDetail(scope.row.deviceName)">详情</el-button>
          <el-button size="mini" type="danger" @click="handleSet(scope.row.deviceName)">设置</el-button>
        </template>
      </el-table-column>-->
    </el-table> 

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="设备详情" :visible.sync="dialogFormVisible" width="500px">
      <!-- status-icon 当表单校验不通过时, 输入框右侧有个 x 小图标 -->
      <el-form
        status-icon
        ref="pojoForm"
        :rules="rules"
        :model="pojo"
        label-width="100px"
        label-position="right"
        style="width: 400px;"
      >
        <el-form-item label="设备名称">
          <el-input v-model="pojo.deviceName" />
        </el-form-item>
        <el-form-item label="设备别名">
          <el-input v-model="pojo.deviceWc" />
        </el-form-item>
        <el-form-item label="主板类型">
          <el-input v-model="pojo.deviceHard" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-input v-model="pojo.deviceType" />
        </el-form-item>
        <el-form-item label="使用次数">
          <el-input v-model="pojo.paperCount" />
        </el-form-item>
        <el-form-item label="使用状态">
          <el-input v-model="pojo.paperStatus"></el-input>
        </el-form-item>
        <el-form-item label="当前出纸长度">
          <el-input v-model="pojo.paperLength"></el-input>
        </el-form-item>
        <el-form-item label="连续最大出纸次数">
          <el-input v-model="pojo.maxNum"></el-input>
        </el-form-item>
        <el-form-item label="每天最大出纸次数">
          <el-input v-model="pojo.dailyMaxNum"></el-input>
        </el-form-item>
        <el-form-item label="出纸间隔时间">
          <el-input v-model="pojo.interTime"></el-input>
        </el-form-item>
        <el-form-item label="定时开机时间">
          <el-input v-model="pojo.timeOn"></el-input>
        </el-form-item>
        <el-form-item label="定时关机时间">
          <el-input v-model="pojo.timeOff"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">退 出</el-button>
        <!-- <el-button
          type="primary"
          @click="pojo.id ===null ? addData('pojoForm') : updateData('pojoForm')"
        >确 定</el-button>-->
      </div>
    </el-dialog>

    <el-dialog title="设备设置" :visible.sync="dialogSetFormVisible" width="500px">
      <!-- status-icon 当表单校验不通过时, 输入框右侧有个 x 小图标 -->
      <el-form
        status-icon
        ref="pojoSetForm"
        :rules="rules"
        :model="pojo"
        label-width="100px"
        label-position="right"
        style="width: 400px;"
      >
        <el-form-item label="连续最大出纸次数" prop="maxNum">
          <el-input v-model="pojo1.maxNum"></el-input>
        </el-form-item>
        <el-form-item label="每天最大出纸次数" prop="dailyMaxNum">
          <el-input v-model="pojo1.dailyMaxNum"></el-input>
        </el-form-item>
        <el-form-item label="出纸间隔时间" prop="interTime">
          <el-input v-model="pojo1.interTime"></el-input>
        </el-form-item>
        <el-form-item label="定时开机时间" prop="timeOn">
          <el-input v-model="pojo1.timeOn"></el-input>
        </el-form-item>
        <el-form-item label="定时关机时间" prop="timeOff">
          <el-input v-model="pojo1.timeOff"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSetFormVisible = false">退 出</el-button>
        <el-button type="primary" @click="updateData('pojoSetForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 图片广告 -->
    <el-dialog title="图片广告" :visible.sync="dialogImageFormVisible" width="500px">
        <!-- <div class="demo-image">
          <div class="block" v-for="fit in fits" :key="fit">
            <span class="demonstration">{{ fit }}</span>
            <el-image
              style="width: 100px; height: 100px"
              :src="url"
              :fit="fit"></el-image>
          </div>
          <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
        </div> -->
        <el-table :data="image_avd_list" height="580" style="width: 100%" :header-cell-style="{background:'#ddf6f6',color:'#606266'}" @selection-change="avdcheckSelect">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="avdId" label="广告ID" align="center"></el-table-column>
            <el-table-column prop="avdName" label="广告名称" align="center"></el-table-column>
            <el-table-column prop="description" label="广告描述" align="center"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogImageFormVisible = false">退 出</el-button>
          <el-button type="primary" @click="imageAvdSet()">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 视频广告 -->
    <el-dialog title="视频广告" :visible.sync="dialogVideoFormVisible" width="500px">
        <el-table :data="video_avd_list" height="580" style="width: 100%" :header-cell-style="{background:'#ddf6f6',color:'#606266'}" @selection-change="avdcheckSelect">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="avdId" label="广告ID" align="center"></el-table-column>
            <el-table-column prop="avdName" label="广告名称" align="center"></el-table-column>
            <el-table-column prop="description" label="广告描述" align="center"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVideoFormVisible = false">退 出</el-button>
          <el-button type="primary" @click="videoAvdSet()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import deviceApi from "@/api/device";
import {formatDate} from "@/api/date";

// 支付类型
const payTypeOptions = [
  { type: "1", name: "现金" },
  { type: "2", name: "微信" },
  { type: "3", name: "支付宝" },
  { type: "4", name: "银行卡" }
];

export default {
  data() {
    return {
      image_avd_list:[],
      video_avd_list:[],
      list: [],
      total: 0, // 总记录数
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页显示10条数据,
      searchMap: {
        // 条件查询绑定条件值
        deviceName: "",
        deviceHard: "",
        deviceType: ""
      },
      payTypeOptions, // 支付类型，ES6语法
      pojo: {
        id: null,
        deviceName: "",
        deviceWc: "",
        deviceHard: "",
        deviceType: "",
        paperCount: 0,
        paperStatus: "",
        paperLength: "",
        maxNum: 0,
        dailyMaxNum: 0,
        interTime: 0,
        timeOn: "",
        timeOff: ""
      }, // 提交的数据
      dialogFormVisible: false, // 控制新增对话框
      pojo1: {
        deviceNames: [], //多选框选择的值
        avdIds:[],
        maxNum: 2,
        dailyMaxNum: 10,
        interTime: 10,
        timeOn: "07-00",
        timeOff: "22-00"
      },
      dialogSetFormVisible: false, // 控制新增对话框
      // fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ],
      dialogImageFormVisible:false, // 图片广告
      dialogVideoFormVisible:false //视频广告
    };
  },

  components: {},

  created() {
    this.fetchData();
  },

  methods: {
    //版本升级
    updateVersion(){
      if(this.pojo1.deviceNames.length > 0){
          this.$confirm("确认升级设备端版本", "提示", {
              confirmButtonText: "确认",
              cancleButtonText: "取消"
          }).then(() => {
            deviceApi.deviceSet(6,this.pojo1).then(response => {
              const resp = response.data;
              this.$message({
                message: resp.message,
                type: resp.flag ? "success" : "error"
              });
              if (resp.flag) {
                // 删除成功,刷新列表
                this.fetchData();
              }
            });
          })
          .catch(() => {
            // 取消删除
          });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //视频广告
    deviceVideoAvdSet(){
      if(this.pojo1.deviceNames.length > 0){
        this.dialogVideoFormVisible = true

        deviceApi.searchAvds(2).then(response => {
          const resp = response.data;
          if (resp.flag) {
            this.video_avd_list = resp.data;
          }
        });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //图片广告
    deviceImageAvdSet(){
      if(this.pojo1.deviceNames.length > 0){
        this.dialogImageFormVisible = true

        deviceApi.searchAvds(1).then(response => {
          const resp = response.data;
          if (resp.flag) {
            this.image_avd_list = resp.data;
          }
        });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //本地广告
    deviceLocalAvdSet(){
      if(this.pojo1.deviceNames.length > 0){
          this.$confirm("确认切换本地广告", "提示", {
              confirmButtonText: "确认",
              cancleButtonText: "取消"
          }).then(() => {
            deviceApi.deviceSet(5,this.pojo1).then(response => {
              const resp = response.data;
              this.$message({
                message: resp.message,
                type: resp.flag ? "success" : "error"
              });
              if (resp.flag) {
                // 删除成功,刷新列表
                this.fetchData();
              }
            });
          })
          .catch(() => {
            // 取消删除
          });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //扫码模式
    qrcodeMode(){
      if(this.pojo1.deviceNames.length > 0){
        //本来是扫码模式的，不需要切换
        this.$confirm("确认切换扫码模式", "提示", {
          confirmButtonText: "确认",
          cancleButtonText: "取消"
        }).then(() => {
          deviceApi.deviceSet(2,this.pojo1).then(response => {
            const resp = response.data;
            this.$message({
              message: resp.message,
              type: resp.flag ? "success" : "error"
            });
            if (resp.flag) {
              // 删除成功,刷新列表
              this.fetchData();
            }
          });
        })
        .catch(() => {
          // 取消删除
        });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //刷脸模式
    faceMode(){
      if(this.pojo1.deviceNames.length > 0){
        //本来是刷脸的，不需要切换
        this.$confirm("确认切换刷脸模式", "提示", {
          confirmButtonText: "确认",
          cancleButtonText: "取消"
        }).then(() => {
          deviceApi.deviceSet(1,this.pojo1).then(response => {
            const resp = response.data;
            this.$message({
              message: resp.message,
              type: resp.flag ? "success" : "error"
            });
            if (resp.flag) {
              // 删除成功,刷新列表
              this.fetchData();
            }
          });
        })
        .catch(() => {
          // 取消删除
        });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
    },
    //设备设置
    deviceInfoSet(){
        //进入设备控制信息界面，有选中设备，弹出，否则提示
      // deviceApi.deviceSet(this.pojo1)
      //   .then(response => {
      //      const data = response.data.data;
      //      console.log("data:"+data);
      //   });
      //console.log("length:"+this.pojo1.deviceNames.length);
      if(this.pojo1.deviceNames.length > 0){
          this.dialogSetFormVisible = true;
          this.$nextTick(() => {
            // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
            // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
            this.$refs["pojoSetForm"].resetFields();
          });
      }else{
        this.$message({
            message: "没有选择设备",
            type: "warning"
        });
      }
      
    },

    //设备设置，广告设置，版本升级，取纸设置
    checkSelect(val){
        // for (var x of val) {
        //     console.log("x:"+x.deviceName);
        // }
        this.pojo1.deviceNames = []
        val.forEach((item,index)=>{
              //console.log("item:"+item.deviceName);
              this.pojo1.deviceNames[index] = item.deviceName
        });
        //this.deviceSetData = val;
        //console.log("选中："+ this.pojo1.deviceNames);
    },
    avdcheckSelect(val){
        this.pojo1.avdIds = []
        val.forEach((item,index)=>{
              this.pojo1.avdIds[index] = item.avdId
        });
    },
    //转变设备类型数据
    deviceTypeFormat(row, column){
      if(row.deviceType == 1) {
        return '瑞沃厕纸机';
      }else if(row.deviceType == 2){
        return '瑞沃抹纸机';
      }
    },
    deviceHardFormat(row, column){
        if(row.deviceHard == 1) {
          return '华诚设计';
        }else if(row.deviceHard == 2){
          return '华芯智控';
        }
    },
    deviceStatusFormat(row, column){
        if(row.deviceStatus == 1) {
          return '工作正常';
        }else if(row.deviceStatus == 2){
          return '出纸异常';
        }if(row.deviceStatus == 3) {
          return '余量不足';
        }else if(row.deviceStatus == 4){
          return '纸巾用完';
        }
    },
    onlineFormat(row, column){
        if(row.online == -1) {
          return '设备离线';
        }else if(row.online == 1){
          return '设备在线';
        }
    },
    paperOutTypeFormat(row, column){
        if(row.paperOutType == 1) {
          return '刷脸模式';
        }else if(row.paperOutType == 2){
          return '扫码模式';
        }else if(row.paperOutType == 3){
          return '感应模式';
        }else if(row.paperOutType == 4){
          return '正在切换';
        }
    },
    deviceAvdTypeFormat(row, column){
      if(row.deviceAvdType == 1) {
        return '图片广告';
      }else if(row.deviceAvdType == 2){
        return '视频广告';
      }else if(row.deviceAvdType == 3){
        return '本地广告';
      }
    },
    timeFormat(row, column){
      let date = new Date(row.updateTime)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    },
    paperLengthFormat(row, column){
       if(row.paperLength == 1) {
          if(row.deviceType == 1) {
              return '500MM';
          }else if(row.deviceType == 2) {
              return '230MM';
          }
      }else if(row.paperLength == 2){
          if(row.deviceType == 1) {
              return '700MM';
          }else if(row.deviceType == 2) {
              return '350MM';
          }
      }else if(row.paperLength == 3){
          if(row.deviceType == 1) {
              return '900MM';
          }else if(row.deviceType == 2) {
              return '460MM';
          }
      }
    },
    // 当每页显示条数改变后,被触发 , val是最新的每页显示条数
    handleSizeChange(val) {
      // console.log(val)
      this.pageSize = val;
      this.fetchData();
    },
    // 当页码改变后,被触发 , val 是最新的页面
    handleCurrentChange(val) {
      // console.log(val)
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 调用分页方法查询, 不要少了 this
      deviceApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
           const data = response.data.data;
           this.list = data.rows;
           this.total = data.total;
           console.log("total:"+total);
        });

      /*memberApi.getList().then(response => {
        const resp = response.data;
        this.list = resp.data;

        console.log(resp.data);
      });*/
    },

    //重置
    resetForm(formName) {
      console.log("重置", formName);
      // 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效
      this.$refs[formName].resetFields();
    },

    // 提交新增数据
    addData(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //提交表单
          console.log("addData");
          memberApi.add(this.pojo).then(response => {
            const resp = response.data;
            if (resp.flag) {
              //新增成功，刷新列表数据
              this.fetchData();
              this.dialogFormVisible = false; // 关闭窗口
            } else {
              // 失败，来点提示信息
              this.$message({
                message: resp.message,
                type: "warning"
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //弹出设备详情窗口
    handleDetail(deviceName) {
      console.log("设备详情");
      this.handleAdd();
      memberApi.getDeviceDetailByDeviceName(deviceName).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.pojo = resp.data;
          console.log(this.pojo);
        }
      });
    },
    //弹出设备控制窗口
    handleSet(deviceName) {
      console.log("设备控制");

      this.dialogSetFormVisible = true;
      this.$nextTick(() => {
        // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
        // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
        this.$refs["pojoForm"].resetFields();
      });

      memberApi.getDeviceSetByDeviceName(deviceName).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.pojo1 = resp.data;
          console.log(this.pojo);
        }
      });
    },

    // 弹出新增窗口
    handleAdd() {
      console.log(this.pojo);
      // this.pojo = {}
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
        // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
        this.$refs["pojoForm"].resetFields();
      });
    },
    // 打开编辑窗口
    handleEdit(id) {
      console.log("编辑");
      this.handleAdd();
      memberApi.getById(id).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.pojo = resp.data;
          console.log(this.pojo);
        }
      });
    },
    //提交修改数据
    updateData(formName) {
      console.log("updateData:"+formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 提交更新
          // memberApi.update(this.pojo1).then(response => {
          //   const resp = response.data;
          //   if (resp.flag) {
          //     // 刷新列表
          //     this.fetchData();
          //     this.dialogSetFormVisible = false;
          //   } else {
          //     this.$message({
          //       message: resp.message,
          //       type: "warning"
          //     });
          //   }
          // });

         deviceApi.deviceSet(0,this.pojo1).then(response => {
              const resp = response.data;
              if (resp.flag) {
                this.fetchData();
                this.dialogSetFormVisible = false;
              }else{
                 this.$message({
                  message: resp.message,
                  type: "warning"
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    //图片广告设置
    imageAvdSet(){
      deviceApi.deviceSet(3,this.pojo1).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.fetchData();
          this.dialogImageFormVisible = false;
        }else{
            this.$message({
            message: resp.message,
            type: "warning"
          });
        }
      });
    },
    //视频广告设置
    videoAvdSet(){
      deviceApi.deviceSet(4,this.pojo1).then(response => {
        const resp = response.data;
        if (resp.flag) {
          this.fetchData();
          this.dialogVideoFormVisible = false;
        }else{
            this.$message({
            message: resp.message,
            type: "warning"
          });
        }
      });
    },
    //删除会员
    handleDele(id) {
      console.log("删除");
      console.log("删除", id);
      this.$confirm("确认删除这条记录吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消"
      })
        .then(() => {
          // 确认
          console.log("确认");
          memberApi.deleteById(id).then(response => {
            // console.log(response)
            const resp = response.data;

            this.$message({
              message: resp.message,
              type: resp.flag ? "success" : "error"
            });

            if (resp.flag) {
              // 删除成功，刷新列表数据
              this.fetchData();
            }
          });
        })
        .catch(() => {
          // 取消，不用理会
          console.log("取消");
        });
    }
  },

  filters: {
    payTypeFilter(type) {
      /* payTypeOptions.find(obj => {
                return obj.type === type
            }) */
      // 在过滤 器当中不能引用当前实例 this   this.payTypeOptions 错误的
      const payObj = payTypeOptions.find(obj => obj.type === type);
      return payObj ? payObj.name : null;
    }
  }
};
</script>

<style scoped>
</style>